---
title: チェックマーク
image: '""'
---

<Frame>
  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
</Frame>

成功したまたは完了したアクションを示します。

<Tabs>
<Tab title="Usage">

```jsx
import { Checkmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return <Checkmark />;
};
```

</Tab>

<Tab title="Props">

`div` 要素の全てのプロパティを受け取る他、`React.ComponentPropsWithoutRef<'div'>`を拡張します。

</Tab>

</Tabs>

## アニメーション付きチェックマーク

アニメーション機能を追加したチェックマークアイコンを示します。

<Tabs>

<Tab title="Usage">

```jsx
import { AnimatedCheckmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return (
    <AnimatedCheckmark
      isAnimating={true}
      color="green"
      duration={0.5}
      size={30}
    />
  );
};
```

</Tab>

<Tab title="Props">

| プロパティ      | タイプ    | 説明                    | デフォルト                |
| ---------- | ------ | --------------------- | -------------------- |
| アニメーションの有無 | ブール型   | チェックマークのアニメーションを制御します | 偽                    |
| カラー        | string | チェックマークの色             |                      |
| 継続時間       | 数      | アニメーションの持続時間（秒）       | 0.5秒 |
| サイズ        | 数      | チェックマークのサイズ           | 28ピクセル               |

</Tab>

</Tabs>
